/* https://chartio.com/resources/tutorials/how-to-resize-an-svg-when-the-window-is-resized-in-d3-js/ */

.svg-container {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 100%;
    vertical-align: top;
    overflow: hidden;
}
.svg-content {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

@keyframes blink {
    0% {
        color: #000;
    }
    67% {
	color: #08b;
	text-shadow: 0px 0px 3px #9cf;
    }
    100% {
        color: #000;
    }
}

.highlighted-node {
    padding: 10px;
    animation: blink normal 1.5s infinite ease-in-out;
}

/* Control area.  */

.control-area {
    position: absolute;
    right: 10px;
    z-index: 20;
}

.button {
    background-color: #5e5;
    color: black;
    border-style: none;
    border-radius: 10px;
    padding: 10px;
    font-size: 20px;
    font-weight: bold;
    opacity: 0.8;
    display: inline-block;
    margin: 10px;
    width: 40px;
    text-align: center;
}

.button:hover {
    cursor: pointer;
    background-color: #8f8;
}

/* Text area for service type documentation and service values.  */

.text-area {
    width: 40%;
    position: absolute;
    z-index: 10;		/* above .svg-content */
}
.node-description {
    font-size: medium;
    color: black;
    background-color: #eee;
    opacity: 0.8;
    margin: 5px;
    padding: 10px;
    border-radius: 10px;
}
.node-category {
    font-style: italic;
}
.edge {
    stroke: #999;
    stroke-width: 0.5;
    stroke-opacity: 0.6;
}
.edge:hover{
    stroke-opacity: 1;
    stroke: #559;
}

/* Displaying Scheme values.  */

.service-value {
    font-family: monospace;
    font-size: small;
    background-color: #f2efe4;
    margin: 5px;
    padding: 10px;
    border-radius: 10px;
    opacity: 0.8;
}
pre.scheme-value {
    display: inline-block;
    margin: 0px;
}
.scheme-record {
    border-style: solid;
    border-width: 0 0 0 1px;
    border-color: #99b;
    border-radius: 3px;
    padding: 5px;
    margin: 5px;
}
.scheme-record-field {
    display: grid;
    grid-template-columns: .3fr .7fr;
    grid-gap: 10px;
}
.scheme-record-field:hover {
    background-color: #fee;
}
.scheme-list-element {
    padding: 0 3px 0 3px;
}
